<template>
  <el-tabs v-model="name" type="card" @tab-click="changeTab">
    <el-tab-pane v-for="(item,index) in newPropList" :name="item.name" :label="item.label" :key="index"
                 type="grade"></el-tab-pane>
  </el-tabs>
</template>

<script>
    export default {
        name: "index",
        props: {
            publishStatus: {
                type: String,
                default: ''
            },
            propsList: {
                type: Array,
                default: () => {
                    return [{
                        label: '已上线',
                        text: '已上线',
                        name: '2'
                    }, {
                        label: '未上线',
                        text: '未上线',
                        name: '1'
                    }, {
                        label: '已下线',
                        text: '已下线',
                        name: '3'
                    }, {
                        label: '全部',
                        text: '全部',
                        name: 'null'
                    }]
                }
            },
            total: 0

        },
        data() {
            return {
                name: '',
            }
        },
        watch: {
            publishStatus: function (val) {
                this.name = val
            }
        },
        computed: {
            newPropList() {
                this.propsList.map((item) => {
                    if (item.name === this.name)
                        item.label = item.text + `(${this.total})`
                    else
                        item.label = item.text
                })
                return this.propsList
            },

        },
        methods: {
            /*handleTotal() {
                let text
                switch (this.total) {
                    case null:
                        text = ''
                        break
                    case 0:
                        text = `(0)`
                        break
                    default:
                        text = `(${this.total})`
                        break
                }
                return text
            },*/
            changeTab(tab) {
                this.$emit('tab-click', tab.name)
            }
        },
        created() {
            this.name = this.publishStatus
        }
    }
</script>

<style scoped>

</style>
